<template>
  <div>
    <el-tag>折光压纹</el-tag>
    <el-checkbox @change="clickToChange()">需要</el-checkbox>
    <br/>
    <template v-if="getRole()">
    <el-tag type="warning" class="cost" v-if="!disable">成本: {{computeCost()}}</el-tag>
      <el-tag type="warning" class="cost" v-else>成本: </el-tag>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Zheguangyawen',
  props: ['Q', 'x', 'y', 'confirm'],
  data () {
    return {
      disable: true,
      zheguangyawen: {
        xu_yao: true
      }
    }
  },
  methods: {
    clickToChange () {
      this.disable = !this.disable
    },
    computeCost () {
      let q = parseInt(this.Q)
      let chang = parseInt(this.x)
      let kuan = parseInt(this.y)
      let s = chang <= kuan ? (chang + 15) * (kuan + 10) / Math.pow(10, 6) : (chang + 10) * (kuan + 15) / Math.pow(10, 6)
      let sStr = chang <= kuan ? `(${chang} + 15) × (${kuan} + 10) × (10 ^ -6)` : `(${chang} + 10) × (${kuan} + 15) × (10^-6)`
      let cost = 0.3 * s * q <= 1000 ? 1000 : 0.3 * s * q + 700
      return 0.3 * s * q <= 1000 ? `300 + 700 = 1000` : `0.3 × ${sStr} × ${q} + 700 = ${cost}`
    },
    clickToFin () {
      if (!this.disable) this.$emit('transferToFather', 'zheguangyawen', this.zheguangyawen)
    },
    getRole () {
      return sessionStorage.getItem('roleType') === '1'
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length{
  width: 100px;
}

.el-select{
  margin-right: 10px;
  margin-top: 10px;
}

.el-input{
  margin-right: 10px;
  margin-top: 10px;
}

.cost{
  margin-top: 10px;
}
</style>
